<template>
  <el-dialog
    title="选择链接"
    :visible.sync="visible"
    width="800px"
    append-to-body
  >
    <avue-form
      ref="crud"
      v-model="choseForm"
      :option="linkOption"
    >
      <template #advertisLink>
        <div
          v-if="choseForm.advertisLinkType === '1'"
          class="flex"
        >
          <el-checkbox
            v-model="choseForm.thirdLinkFlag"
            :true-label="'0'"
            :disabled="btnType === 'view'"
            :false-label="'1'"
          >
            是否第三方链接
          </el-checkbox>
          <el-input
            v-model="choseForm.advertisLink"
            style="width: 80%"
            :disabled="btnType === 'view'"
            placeholder="请输入h5链接"
            maxlength="200"
          ></el-input>
        </div>
      </template>
      <template #advertisLinkType>
        <div>
          <el-select
            v-model="choseForm.advertisLinkType"
            clearable
            :disabled="btnType === 'view'"
            placeholder="请选择"
            @change="changeLinkType"
          >
            <el-option
              v-for="item in linkTypeList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </template>
      <template #advertisPageId>
        <div v-if="choseForm.advertisLinkType === '0'">
          <el-select
            v-model="choseForm.advertisPageId"
            clearable
            filterable
            :disabled="btnType === 'view'"
            placeholder="请选择"
            @change="changePage"
          >
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.pageName"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </template>
      <template #paramter>
        <el-row
          v-if="choseForm.advertisPageId"
          :gutter="20"
        >
          <el-col
            v-if="appList && appList.length > 0 && appList[0].key"
            :span="12"
          >
            <div>app参数</div>
            <div
              v-for="(item, index) in appList"
              :key="index"
              class="flex"
            >
              <div style="width: 100px">{{ item.key }}({{ item.name }})</div>
              <el-input
                v-model="item.value"
                :disabled="btnType === 'view'"
                maxlength="30"
              ></el-input>
            </div>
          </el-col>
          <el-col
            v-if="mpList && mpList.length > 0 && mpList[0].key"
            :span="12"
          >
            <span>小程序参数</span>
            <div
              v-for="(item, index) in mpList"
              :key="index"
              class="flex"
            >
              <div style="width: 100px">{{ item.key }}({{ item.name }})</div>
              <el-input
                v-model="item.value"
                :disabled="btnType === 'view'"
                maxlength="30"
              ></el-input>
            </div>
          </el-col>
        </el-row>
      </template>
      <!-- </el-form> -->
    </avue-form>
    <template #footer>
      <el-button
        type="primary"
        :disabled="btnType === 'view'"
        @click="submit"
      >
        确定
      </el-button>
      <el-button @click="cancel">取消</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { linkOption } from '@/const/crud/advertising/list';
import { selectList } from '@/api/operation/advertising';
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    // choseLinkObject: {
    //   type: Object,
    // },
    // linkObject: {
    //   type: Object,
    // },
    indexForm: {
      type: Object,
    },
    btnType: {
      type: String,
    },
    count: {
      type: Number,
    },
  },
  data() {
    return {
      choseForm: {},
      list: [],
      pageObject: {},
      linkTypeList: [
        {
          label: '内部页面',
          value: '0',
        },
        {
          label: 'H5链接',
          value: '1',
        },
      ],
      appList: [
        {
          key: '',
          name: '',
          value: '',
        },
      ],
      mpList: [
        {
          key: '',
          name: '',
          value: '',
        },
      ],
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    linkOption() {
      return linkOption(this.btnType === 'view');
    },
  },
  watch: {
    async visible(val) {
      this.choseForm = JSON.parse(JSON.stringify(this.indexForm));
      if (val) {
        if (this.btnType === 'add') {
          // this.choseForm.advertisLinkType = '0';
          // this.choseForm.advertisPageId = '';
          // this.choseForm.thirdLinkFlag = '';
          // this.choseForm.advertisLink = '';
        }
        //回显数据
        if (this.btnType === 'edit' || this.btnType === 'view') {
          if (!this.choseForm.advertisLinkType) {
            this.choseForm.advertisLinkType = '0';
          }
          const appList =
            this.choseForm.appParams && JSON.parse(this.choseForm.appParams);
          this.appList =
            (appList && appList.filter((item) => item.value)) || [];

          const mpList =
            this.choseForm.mpParams && JSON.parse(this.choseForm.mpParams);
          this.mpList = (mpList && mpList.filter((item) => item.value)) || [];
        }
      } else {
        this.choseForm = {};
        this.$refs.crud.resetFields();
      }
    },
  },
  async created() {
    await this.selectList();
  },
  methods: {
    cancel() {
      this.visible = false;
    },
    //查询
    async selectList() {
      const res = await selectList();
      this.list = res.data.data;
    },
    // 链接类型
    changeLinkType(val) {
      this.choseForm.advertisLinkType = val;
      if (val === '1') {
        // h5链接
        this.choseForm.advertisPageId = '';
      } else {
        // 内部跳转页面
        this.choseForm.thirdLinkFlag = '';
        this.choseForm.advertisLink = '';
        this.choseForm.advertisPageId = '';
      }
    },
    // 内部跳转页面
    changePage(val) {
      debugger;
      this.choseForm.advertisPageId = val;
      const obj = this.list.find((item) => item.id === val);
      let appParams = JSON.parse(obj.appParams);
      if (appParams && appParams instanceof Array && appParams.length > 0) {
        appParams.forEach((item) => {
          item.key = item.parameter;
          item.name = item.parameterName;
          item.value = '';
        });
        appParams = (appParams && appParams.filter((item) => item.key)) || [];
      }
      this.appList = appParams || [];

      let mpParams = JSON.parse(obj.mpParams);
      if (mpParams && mpParams instanceof Array && mpParams.length > 0) {
        mpParams.forEach((item) => {
          item.key = item.parameter;
          item.name = item.parameterName;
          item.value = '';
        });
        mpParams = (mpParams && mpParams.filter((item) => item.key)) || [];
      }
      this.mpList = mpParams || [];
    },
    //确定
    submit() {
      this.$refs.crud.validate(async (valid, done) => {
        if (valid) {
          if (this.choseForm.advertisLinkType === '0') {
            const app = [];
            let flag1 = true;
            for (let i = 0; i < this.appList.length; i++) {
              if (this.appList[i].value) {
                app.push({
                  key: this.appList[i].key,
                  value: this.appList[i].value,
                  name: this.appList[i].name,
                });
              } else {
                flag1 = false;
                break;
              }
            }
            if (!flag1 && this.appList.length > 0) {
              this.$message.warning(`请输入app参数`);
              done;
              return;
            }

            const mp = [];
            let flag2 = true;
            for (let i = 0; i < this.mpList.length; i++) {
              if (this.mpList[i].value) {
                mp.push({
                  key: this.mpList[i].key,
                  value: this.mpList[i].value,
                  name: this.mpList[i].name,
                });
              } else {
                flag2 = false;
                break;
              }
            }

            if (!flag2 && this.mpList.length > 0) {
              this.$message.warning(`请输入小程序参数`);
              done;
              return;
            }
            this.visible = false;
            console.log('22222222222222222222222', this.choseForm);
            this.$emit(
              'success',
              JSON.stringify(app),
              JSON.stringify(mp),
              JSON.parse(JSON.stringify(this.choseForm))
            );
          } else {
            debugger;
            console.log('3333333333333333333333333333', this.choseForm);
            this.visible = false;
            this.$emit(
              'success',
              '',
              '',
              JSON.parse(JSON.stringify(this.choseForm))
            );
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
